import React, {useEffect} from 'react';
import Images from '../images/images';
import screen from '../utils/screen';
import {ImageBackground, StyleSheet, Text, View,Image} from 'react-native';
import TouchableView from './touchableView';
import {useNavigation} from '@react-navigation/native';



const MessageItem = ({data,index})=>{

    const navigation = useNavigation()

    useEffect(()=>{

    },[])


    const onMsgClick = ()=>{
        navigation.navigate('MessageEdit',{
            data,
            index
        })
    }

    return (
        <TouchableView
            style={styles.container}
            onPress={onMsgClick}
        >
            <View style={{flexDirection:'row',alignItems:'center'}}>
                <Image source={Images.custom_service}
                       resizeMode={'contain'}
                       style={{width:screen.PIXEL_30,height:screen.PIXEL_30,marginRight:3}}
                />
                <Text style={styles.name}>{data.phone}</Text>
            </View>

            <Text style={{marginVertical:8}}>{data.message}</Text>

            <View style={{flexDirection:'row',alignItems:'center',justifyContent:'space-between'}}>
                <Text style={styles.sender}>发送者：我</Text>
                <Text style={{fontSize:11}}>{data.createTime}</Text>
            </View>


        </TouchableView>
    )
}

export default MessageItem

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#fff', borderRadius: screen.PIXEL_20, height: screen.PIXEL_200,
        padding: screen.PIXEL_30, marginBottom: screen.PIXEL_40
    },
    name:{
        color:'#333',fontSize:15,fontWeight:'500'
    },
    sender:{
        backgroundColor: '#999',color:'#fff',borderRadius: 10,height:screen.PIXEL_40,fontSize: 10,
        paddingHorizontal:8,textAlignVertical:'center'
    }
})
